#include ("/_includes/_layout.html")
#define css()
<style type="text/css">
.nav-tabs li{width:100px;}
.nav-tabs li a{text-align: center;}
</style>
<link rel="stylesheet" type="text/css" href="#(webctx)/resources/css/product_import.css"/>
#end
#@layout("商品管理", "wxmall,点步科技", "Wxmall社区", "wxmall") 
#define content()
<div class="wrapper wrapper-content">
	<div class="content-tabs">
        <nav class="page-tabs J_menuTabs">
        	<div class="page-tabs-content" style="margin-left: 0px;">
        	<a href="#(webctx)/product/importin" class="J_menuTab active">导入外部商品</a>
        	</div>
        </nav>
    </div>
    
    <div class="panel">
      <div class="panel-title align-center import-goods-title" style="font-size: 14px;">外部商品导入流程</div>
      <div class="panel-content p-b-10 p-t-10">
        <step-bar-one active="0" steps="$ctrl.steps" class="ng-isolate-scope">
        <ol class="step-progress">
		  <li ng-repeat="item in $ctrl.steps" data-step="1" class="ng-scope">
		    <span class="ng-binding">添加并授权店铺</span>
		  </li>
		  <li ng-repeat="item in $ctrl.steps" data-step="2" class="ng-scope">
		    <span class="ng-binding">查看并选择商品</span>
		  </li>
		  <li ng-repeat="item in $ctrl.steps" data-step="3" class="ng-scope">
		    <span class="ng-binding">导入所选商品</span>
		  </li>
		  <li ng-repeat="item in $ctrl.steps" data-step="4" class="ng-scope">
		    <span class="ng-binding">设置商品分类</span>
		  </li>
		  <!-- <li ng-repeat="item in $ctrl.steps" data-step="5" class="ng-scope">
		    <span class="ng-binding">完成首次铺货</span>
		  </li> -->
		  <li ng-repeat="item in $ctrl.steps" data-step="5" class="ng-scope">
		    <span class="ng-binding">检查并更新商品</span>
		  </li><!-- end ngRepeat: item in $ctrl.steps -->
		</ol>
		</step-bar-one>
      </div>
    </div>
    
	<div id="tableList" class="ibox-content">
		<div id="productToolsbar" class="panel-body">
			<div style="float: left; margin-right: 20px;"><a href="#(webctx)/youzan/auth?rUrl=/product/importin" class="btn btn-success">添加有赞店铺</a></div>
			<div id="pager" class="jqpager" style="margin-bottom: 1px;float: right;"></div>
		</div>
		<table class="table table-striped table-bordered" id="mainTable" border="0">
			<thead>
				<tr>
					<th><input type="checkbox" id="all" title="全选/反选" style="margin-right: 4px; vertical-align: middle;"/></th>
					<th><span style="vertical-align: middle;">&nbsp;&nbsp;店铺名称</span></th>
					<th>店铺类型</th>
					<th>授权时间</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody class="authShopLotGrid"></tbody>
		</table>
	</div>
</div>

<script type="text/template" id="authshop_table_tr_tpl">
{{each list as item i}}
		<tr class="package">
			<td><input type="checkbox" class="commchk" id="checkbox_{{item.id}}" style="margin-right: 4px; vertical-align: middle;"/></td>
			<td><img width="40" height="40" src="{{item.shopLogo}}"><a class="new-window" href="javascript:void(0)" title="{{item.shopName}}">&nbsp;{{item.shopName}}</a></img></td>
			<td>{{if item.shopType == 0}} 有赞 {{else if item.shopType==1}} 拼多多 {{else if item.shopType==2}} 淘宝 {{else}} 未知类型 {{/if}}</td>
            <td>{{item.created}}</td>
			<td>&nbsp;<a id="edit#{{item.id}}" href="javascript:void(0)">选择商品</a>
			</td>
		</tr>
{{/each}}
</script>
<script type="text/template" id="table_noresult_tr_tpl">
	<tr class="package">
		<td class="center" colspan="5">还没有授权任何店铺</td>
	</tr>
</script>
#end
<script type="text/javascript">
var params = {};
var table = new obz.TableView("pager", obz.ctx + "/authshop/list", params, function(resp){
	$(".authShopLotGrid").empty();
	if(resp && resp.list && resp.list.length>0){
		$('.authShopLotGrid').html(template('authshop_table_tr_tpl', resp));
		//初始化checkbox点击事件
		TBatch.checkCheckbox();
		TBatch.initCheckboxClick();
		TBatch.initOptEvent(TableOpt.init());
	}else{
		$(".authShopLotGrid").append($("#table_noresult_tr_tpl").html());
	}
});
table.init();

$("#myqueryBtn").click(function(){
	params.categoryId = $("#p_category").val();
	params.name = $("#p_name").val();
	table.init();
});

//=============================表格操作事件开始=============================================
var TableOpt = {
	edit : function(param){
		var id = param[1];
		var url = "#(webctx)/authshop/products?authShopId=" + id;
		var dialog = BootstrapDialog.show({
			size: BootstrapDialog.SIZE_WIDE,
			title: "选择要导入的商品",
	        message: $('<div></div>').load(url),
	        buttons: [ {
                label: '关闭',
                action: function(dialogItself){
                    dialogItself.close();
                }}, 
                {
                	label: '确认导入',
                	cssClass : "btn-primary",
                	action: function(self){
                		importProduct();
                	}
                }]
	    });
	}, 
	
	init : function(){
		var optArray = new Array();
		optArray.push(this.edit);
		return optArray;
	}
}	
//=============================表格操作事件结束=============================================
</script>